<template>
  <div >
    <a-button type="primary" @click="showDrawer('large')">新建</a-button>
    <a-drawer
      width="500px"
      title="
         新建知识库"
      :size="size"
      :visible="visible"
      @close="onClose"
    >
      <p>名称：<input type="text" /></p>
      <p>描述：<textarea name="" id="" cols="30" rows="10"></textarea></p>
      <p>评论：<van-switch v-model="checked" /></p>
      <p>
        <OSSFromStyleBox></OSSFromStyleBox>
      </p>
      <p><Uploading></Uploading></p>
    </a-drawer>
  </div>
</template>
<script>
import OSSFromStyleBox from '../OSSFromStyleBox/index.vue'
import Uploading from '../Uploading/index.vue'
import OSS from '../OSS/index.vue';
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const checked = ref(false);
    const visible = ref(false);
    const size = ref("default");

    const showDrawer = (val) => {
      size.value = val;
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };

    return {
      visible,
      size,
      checked,
      showDrawer,
      onClose,
    };
  },
  components: {
    OSS,
    Uploading,
    OSSFromStyleBox
  },
});
</script>